<template>
	<view class="bigbox">
		<view class="image_top">
			<image src="../../static/image_two.jpg" mode=""></image>
		</view>
		<view class="title_every">
			<u-cell title="一号展厅:" value="好东西"></u-cell>
			<u-cell title="地理位置:" value="安徽"></u-cell>
			<u-cell title="面积:" value="366"></u-cell>
			<u-cell title="文物藏数:" value="50"></u-cell>
			<u-cell title="层数:" value="2"></u-cell>
			<u-cell title="是否:" value="否"></u-cell>
			<u-cell title="可容纳人数:" value="600"></u-cell>
		</view>
		<view class="">
			<u-button type="primary" @click="ClickTime">点击预约</u-button>
		</view>
		<u-datetime-picker title="请选择预约时间" :show="show" v-model="value1" mode="date" :formatter="formatter" @confirm="confirm"
			@cancel="cancel"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeId: '', //传过来的参数
				show: false, //控制时间
				value1: '', //选择的时间的值
				zhanguanId:''
			};
		},
		onLoad(options) {
			this.zhanguanId = options.zhanguanId,
			this.typeId = options.typeId
		},
		methods: {
			//日期格式化
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			//点击确定预约
			ClickTime() {
				var that = this
				uni.showModal({
					title: '提示',
					content: '是否预约',
					confirmColor: '#269fde',
					success: (res) => {
						if (res.confirm) {
							this.show = true
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			confirm(e) {
				this.value1 = this.timestampToDate(e.value)
				this.show = false
				//这里调接口
				
			},
			//时间戳处理
			timestampToDate(timestamp) {  
			    var date = new Date(timestamp);  
			    var year = date.getFullYear();  
			    var month = String(date.getMonth() + 1).padStart(2, '0');  
			    var day = String(date.getDate()).padStart(2, '0');  
			    return year + '-' + month + '-' + day;  
			} , 
			//关闭选择时间的弹窗
			cancel() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f3f3f3;

		.bigbox {
			background-color: #fff;

			.image_top {
				height: 476rpx;
				width: 750rpx;

				image {
					height: 100%;
					width: 100%
				}
			}

			.title_every {
				margin-top: 20rpx;
			}
		}
	}
</style>